<template>
    <el-select style="width: 180px;" v-model="option.values" :placeholder="placeholder" filterable clearable @change="change">
        <el-option :label="item.name" :value="item.id" v-for="(item,index) in option.list" :key="index"/>
    </el-select>
</template>
<script setup name="RemoteElect">
const { proxy } = getCurrentInstance()
//接收参数
const emit = defineEmits(['update:modelValue', 'change']);
const props = defineProps({
    modelValue: { required: true },
    api: {
        required: true, type: String
    },
    placeholder: {
        type: String,
        default: ''
    },
    clearable: {
        type: Boolean,
        default: false
    }
});


const option = reactive({
    values: '',
    list: [],
});

// 监听数据
watch(
    () => props.modelValue,
    (n) => {
        option.values = n
    },
    { deep: true, immediate: true }
);

async function getData() {
    let res = await proxy.$get(props.api, {
    page: 1,
    page_size: 10000
  }, false)
  if (res.code === 0) {
    option.list = res.data.list || []
  }
}

//数据改变
function change() {
    emit('update:modelValue', option.values);
    emit('change', option.values)
}

onMounted(() => {
    option.values = props.modelValue 
    getData();
});
</script>
<style scoped lang="scss">
.icon {
    margin-right: 4px;
}

.down {
    margin-left: 2px;
}

.el-card:deep() {
    .el-card__body {
        --el-card-padding: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.more {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
}
</style>
